<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- <script src="./js/rem.js"></script> -->
    <!-- <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery-1.12.1.min.js"></script>
    <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>首页</title>
</head>
<body>
    <div class="web">
        <div class="main">
            <header>
                <div class="header_top">
                    <div class="message" id="message_btn">
                        <img src="./img/menu.png" alt="">
                        <div>1</div>
                    </div>
                    <div class="logo">
                        <img src="./img/logo.png" alt="">GIMC省广股份24
                    </div>
                    <div class="header_search"><img src="./img/search.png" alt=""></div>
                    
                </div>
                <div class="header_bottom">
                    <div class="nav"><img src="./img/logo3.png" alt="">GIMC省广股份</div>
                    <div class="almm"><img src="./img/alimm.png" alt=""></div> 
                </div>
            </header>
        <div class="content">
            <div class="roll">
                <div class="turn"><img src="./img/turn1.jpg" alt=""></div>
                <div class="mask">
                    <p>省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
                    <div class="mask_comment fl">
                       <div><img src="./img/love.png" alt="">120</div>
                       <div><img src="./img/eye.png" alt="">560</div>
                    </div>
                    <div class="mask_time fr">12月16日 07:33:43</div>
                </div>
            </div>
            <div class="news_cont">
                <div class="news henxiang">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">120</span><span>2小时前[案例观点] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp1.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                </div>
                <div class="news">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">120</span><span>2小时前[案例观点] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp1.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                </div>
            </div>
            <div class="template">
                <div class="template_top">
                    <p>我知道这一天迟早要来但是没想到它来得这么快</p>
                    <div class="template_photo">
                        <ul>
                            <li><img src="./img/article_1.jpg" alt=""></li>
                            <li><img src="./img/article_2.jpg" alt=""></li>
                            <li><img src="./img/article_3.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="template_comment">
                        <div>
                            <img src="./img/touxiang.jpg" alt="">陈正光
                        </div>
                        <div>
                            <img src="./img/pinglun.png" alt="">886
                        </div>
                        <div><img src="./img/love3.png" alt="">4808</div>
                        <div>2天前 [案例观点] </div>
                    </div>
                </div>
                <div class="news2 henxiang2">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">6</span><span>12月26日 07:33:43[新闻] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp2.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                </div>
                <div class="news2">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">6</span><span>12月26日 07:33:43[新闻] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp3.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                </div>
            </div>
            <div class="template">
                <div class="template_top">
                    <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                    <div class="template_photo">
                        <ul>
                            <li><img src="./img/article_4.jpg" alt=""></li>
                            <li><img src="./img/article_5.jpg" alt=""></li>
                            <li><img src="./img/article_6.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="template_comment">
                        <div>
                            <img src="./img/touxiang.jpg" alt="">陈正光
                        </div>
                        <div>
                            <img src="./img/pinglun.png" alt="">886
                        </div>
                        <div><img src="./img/love3.png" alt="">4808</div>
                        <div>2天前 [案例观点] </div>
                    </div>
                </div>
                <div class="news2 henxiang2">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">6</span><span>12月26日 07:33:43[新闻] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp4.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                </div>
                <div class="news2 henxiang2">
                    <div class="news_wz fl">
                        <p>我知道这一天迟早要来，但是没想到它来得这么快</p>
                        <div>
                            <span><img src="./img/love2.png" alt="">6</span><span>12月26日 07:33:43[新闻] </span>
                        </div>
                    </div>
                    <div class="news_tp fr">
                        <img src="./img/news_tp5.jpg" alt="">
                    </div>
                    <!-- 清除浮动 -->
                    <div class="clear"></div>
                    </div>
                </div>
                <div class="more">加载更多</div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>
                    <img src="./img/home_on.png" alt="">
                    <span class="bianhong">首页</span>
                </li>
                <li>
                    <a href=" http://tongshuai666.gitee.io/gimc/GIMC.html"><img src="./img/GIMC_out.png" alt="">
                    <span>GIMC</span>
                    </a>
                </li>
                <li>
                    <img src="./img/article_out.png" alt="">
                    <span>文章</span>
                </li>
                <li>
                    <a href="http://tongshuai666.gitee.io/gimc/Resources.html"><img src="./img/resou_out.png" alt="">
                    <span>资源</span>
                    </a>
                </li>
                <li>
                   <a href="http://tongshuai666.gitee.io/gimc/collage.html"><img src="./img/college_out.png" alt="">
                    <span>学院</span>
                    </a>
                </li>
            </ul>
        </footer>

        

        <!--个人菜单-->
        <div class="login_box">
            <div class="search_box_top">
                <div class="search_close fl" id="search_btn2" >
                    <img src="./img/close_btn.png"/>
                </div>
                <div class="search_input fl">
                    <button></button>
                    <input type="text" placeholder="Search" />
                </div>
                <div class="clear"></div>
            </div>
            <div class="user">
                <div class="Head_portrait">
                    <div class="portrait_pho">
                        <img src="./img/login.png"/>
                    </div>
                   <div class="login_btn"><input id="Quick_Login" type="button" value="立即登陆"></div>
                </div>
            </div>
            <div class="login_box_cont">
                <div class="login_cont">
                    <div class="gimc" id="gimc1">
                        <p>GIMC</p>
                        <span class="drop_span" id="drop_span1"><img src="./img/drop-down.png"/></span>
                    </div>
                    <div class="drop_down" id="drop_down1">
                        <a>省广介绍</a>
                        <a>新闻资讯</a>
                    </div>
                </div>
                <div class="login_cont">
                    <div class="gimc" id="gimc2">
                        <p>文章</p>
                        <span class="drop_span" id="drop_span2"><img src="./img/drop-down.png"/></span>
                    </div>
                    <div class="drop_down" id="drop_down2">
                        <a>文章1</a>
                        <a>文章2</a>
                    </div>
                </div>
                <div class="login_cont">
                    <div class="gimc" id="gimc3">
                        <p>资源</p>
                        <span class="drop_span" id="drop_span3"><img src="./img/drop-down.png"/></span>
                    </div>
                    <div class="drop_down" id="drop_down3">
                        <a>资源1</a>
                        <a>资源2</a>
                    </div>
                </div>
                <div class="login_cont">
                    <div class="gimc course" id="gimc4">
                        <p>课程</p>
                        <span id="drop_span4"><img src="./img/drop-down.png"/></span>
                    </div>
                    <div class="drop_down" id="drop_down4">
                        <a>课程1</a>
                        <a>课程2</a>
                    </div>
                </div> 
            </div>
        </div>
        <!--登陆页面-->
        <div class="login" id="login_page">
            <div class="back" id="login_back"><img src="./img/back.png" alt=""></div>
            <div class="login_logo"></div>
            <div class="userName">
                <div class="bg fl"><div class="toux"></div></div>
                <div class="shuru fl"><input type="text" id="username_input" placeholder="请输入已验证的手机号或邮箱"/></div>
                <p id="user_prompt">请输入正确的email或手机号！</p>
                <div class="clear"></div>
            </div>
            <div class="password">
                <div class="bg fl"><div class="mima"></div></div>
                <div class="shuru fl"><input type="text" placeholder="请输入密码"/></div>
                <div class="clear"></div>
            </div>
            <div class="forget_pwd">
                <a>
                    <div class="wenhao fl"><img src="./img/login_fgt.png"/></div>
                    <p>忘记密码</p>
                    <div class="clear"></div>
                </a>
            </div>
            <button class="denglu" id="denglu">登录</button>
            <button class="zhuce">注册</button>
        </div>
        <!--个人中心-->
        <!-- <div class="profile">
            <div class="s_top">
                <div class="s_close fl">
                    <img src="images/close_btn.png"/>
                </div>
                <div class="clear"></div>
            </div>
            <div class="s_line"></div>
            <div class="percen">
                <div class="port">
                    <div class="pic_port">
                        <img src="images/head_portrait.png"/>
                    </div>
                    <div class="tips_prot">1</div>
                </div>
                <ul class="mes_per">
                    <li>
                        <small>太君</small>
                        <button>个人中心&nbsp;&nbsp;&gt;</button>
                    </li>
                    <li>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="star fl"><img src="images/star.png"/></div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <p>关注&nbsp;<a href="#">36</a>&nbsp;|&nbsp;粉丝&nbsp;<a href="#">290</a></p>
                    </li>
                    <li>
                        <button class="shoucang">我的收藏</button>
                        <button class="fabu">我的发布</button>
                    </li>
                </ul>
            </div>
            <div class="sort_pro">
                <a class="gimc">
                    <p>GIMC</p>
                    <span class="l_span"><img src="images/drop_left.png"/></span>
                </a>
                <div class="drop_down">
                    <a>省广介绍</a>
                    <a class="line"></a>
                    <a>新闻资讯</a>
                </div>
                <a class="gimc">
                    <p>文章</p>
                    <span><img src="images/drop_left.png"/></span>
                </a>
                <a class="gimc">
                    <p>资源</p>
                    <span><img src="images/drop_left.png"/></span>
                </a>
                <a class="gimc course">
                    <p>课程</p>
                    <span><img src="images/drop_left.png"/></span>
                </a>
            </div>
            <div class="exit_pro">
                <button>退出</button>
            </div>
        </div> -->
    </div>
    <!--热搜页面-->
    <div class="search_box">
        <div class="search_box_top">
            <div class="search_close fl" id="search_btn1" >
                <img src="./img/close_btn.png"/>
            </div>
            <div class="search_input fl">
                <button></button>
                <input type="text" placeholder="Search" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="hot_search">
            <h1>热搜</h1>
            <div class="hotword fl change">
                省广股份
            </div>
            <div class="hotword fl">
                移动互联网
            </div>
            <div class="hotword fl">
                细分平台业务
            </div>
            <div class="hotword fl">
                O2O
            </div>
            <div class="hotword fl">
                媒介平台
            </div>
            <div class="hotword fl">
                拥抱变革，创造未来
            </div>
            <div class="hotword fl">
                平台
            </div>
            <div class="hotword fl">
                上海金投赏创意节
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <script>
        let web = document.querySelector(".web");
        web.addEventListener("click",function(){
            alert(window.innerWidth);
            alert(document.documentElement.clientWidth);
            alert(web.clientWidth);
        })
    </script>
</body>
</html>